<template>

  <div class="article-list">

        <van-pull-refresh 
        v-model="isreFreshLoading"
        :success-text="refreshSuccessText"
        :success-duration="1500"
        @refresh="onRefresh"
        >

        
        <van-list 
        v-model="loading" 
        :finished="finished" 
        finished-text="没有更多了" 
        :error.sync="error"
        error-text="接口关闭了！无法请求数据"
        @load="onLoad"
        >
          <van-cell 
          v-for="(article, index) in list" 
          :key="index" 
          :title="article.title" 
          />
          
        </van-list>
        </van-pull-refresh>
  </div>
</template>

<script>
import {getArticles} from '@/api/article'
export default {
    
    name: 'ArticleList',
    components: {},
    props: {
        channel: {
            type: Object,
            required: true
        }
    },

    data () {
        return {
            list: [], // 存储列表数据的数组
            loading: false, // 控制加载中 loading 状态
            finished: false,// 控制数据加载结束的状态
            timestamp: null,
            error: false,
            isreFreshLoading: false,
            refreshSuccessText: '刷新成功'   //下拉刷新成功提示文本

        }
    },

    methods: {
        async onLoad () {
            try {
                const {data} = await getArticles({
                    channel_id: this.channel_id,
                    timestamp: this.timestamp || Date.now(),
                    with_top: 1
                })


                const{results} = data.data
                // 数组的展开操作符
                this.list.push(...results) 

                this.loading = false

                if (results,length) {
                    // 更新获取下一页
                    this.timestamp = data.data.pre_timestamp
                } else {
                    this.finished = true
                }

            } catch(err){
                this.error = true

                this.loading = false
            }
        },

        // 当下拉刷新的时候会触发调用该函数
        async onRefresh() {
            try {
                 const {data} = await getArticles({
                 channel_id: this.channel_id,
                 timestamp: Date.now(), // 下拉刷新每次请求获取最新数据
                 with_top: 1
                 })

                 const {results} = data.data
                 this.list.unshift(...results)

                 this.isreFreshLoading = false

                this.refreshSuccessText = `刷新成功、更新了${results.length}条数据`

            } catch (err) {
                console.log('请求失败',err)
            }
        }


        // onLoad () {
        //     console.log('onLoad')
        //     setTimeout(() => {
        //         for (let i = 0; i < 10; i++) { 
        //             this.list.push(this.list.length + 1) 
        //         } 
        //         this.loading=false 
        //         if (this.list.length >= 40) {
        //             this.finished = true
        //         }
        //     }, 1000)
        // }
    }
}
</script>

<style scoped lang="less">
    .article-list{
        height: 79vh;
        overflow-y: auto;
    }
</style>